<template>
	<view class="orderlist-content">
		<view class="order-item" v-for="item of list" :key="item.id">
			<view class="type">
				<view class="count-down" v-if="item.status==10">剩余<hs-countdown
						:time="Number(item.remainingPaymentTime)*1000"></hs-countdown>将自动取消</view>
				<text>{{orderStatusOptions[item.status]}}</text>
			</view>
			<view class="order-info" @click="copy(item.id)">
				<view class="code">
					订单编号：{{item.id}}
					<image src="@/static/images/icon/fuzhi.png" mode="aspectFit" class="copy"></image>
				</view>
				<view class="date">
					下单时间：{{item.createdAt}}
				</view>
			</view>
			<view class="product-list" :style="{maxHeight:displayProductList.includes(item.id)?'unset':'223rpx'}"
				:class="{'is-pick-up':item.orderItemList.length>2&&!displayProductList.includes(item.id)}">
				<view class="product-item" v-for="i of item.orderItemList" :key="i.id">
					<image :src="i.imageUrl" mode="" class="img" @click="previewImage(i.imageUrl)"></image>
					<view class="pro-info">
						<view class="name">
							{{i.name}}
						</view>
						<view class="describe">
							{{i.describe || ''}}
						</view>
					</view>
					<view class="pro-num">
						<view class="price">
							￥{{i.totalPrice}}
						</view>
						<view class="count">
							×{{i.quantity}}
						</view>
					</view>
				</view>
			</view>
			<view class="unfold" @click="handleDisplayProduct(item.id)" v-if="item.orderItemList.length>2">
				{{displayProductList.includes(item.id)?'收起':'展开'}}
			</view>
			<view class="total-amount">
				合计：￥{{item.totalAmount}}
			</view>
			<view class="btm-btns">
				<!-- <view class="btn border" v-if="item.status == 10">
					取消订单
				</view> -->
				<!-- <view class="btn border" v-if="item.status == 20 ||item.status == 30||item.status == 21">
					申请退款
				</view> -->
				<view class="btn" @click="openDelivery(item.id,item.trackingNumber)" v-if="item.status == 21">
					查看物流
				</view>
				<view class="btn" v-if="item.status == 10"
					@click="$u.debounce(continuePay(item.totalAmount,item.id,item.remainingPaymentTime))">
					继续付款
				</view>
			</view>
		</view>
		<view class="hs-p-b-20" v-if="!isEmpty">
			<u-loadmore :status="status" />
		</view>
		<u-empty v-if="isEmpty" mode="data" text="暂无数据" icon="/static/images/icon/product.jpg">
		</u-empty>
	</view>
</template>

<script>
	import {
		paymentToOrder
	} from '@/utils/utils.js'
	export default {
		name: "order-list",
		props: {
			list: {
				type: Array,
				default: () => {
					[]
				},
			},
		},
		data() {
			return {
				orderStatusOptions: {
					10: "待付款",
					11: "已取消",
					20: "待发货",
					21: "待收货",
					30: "已完成",
					40: "退款/退货",
				},
				displayProductList: [],
				isEmpty: true,
				status:'loading'
			};
		},
		watch: {
			list(newValue, oldValue) {
				this.displayProductList = []
				this.isEmpty = newValue.length == 0 ? true : false
				if (newValue.length == 0) {
					this.isEmpty = true
					this.status = "nomore";
				} else if (newValue%10 !=0) {
					this.status = "nomore";
					this.isEmpty = false
				} else {
					this.status = "loadmore";
					this.isEmpty = false
				}
			}
		},
		methods: {
			// 展开收起
			handleDisplayProduct(id) {
				let index = this.displayProductList.indexOf(id)
				if (index == -1) {
					this.displayProductList.push(id)
				} else {
					this.displayProductList.splice(index, 1)
				}
			},
			// 继续付款
			continuePay(totalAmount, orderId, remainingPaymentTime) {
				paymentToOrder(orderId)
				// uni.navigateTo({
				// 	url: `/pages/order/pay?amount=${totalAmount}&orderId=${orderId}&time=${remainingPaymentTime}`,
				// })
			},
			// 查看物流
			openDelivery(id,trackingNumber) {
				this.$emit('openDelivery',{
					orderId:id,
					trackingNumber:trackingNumber
				})
			},
			// 复制
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '订单号已复制到剪贴板',
							icon: 'none'
						});
					}
				});
			},
			// 放大图片预览
			async previewImage(imageUrl) {
				// this.$refs.previewPhonecase.show()
				let arr = [imageUrl]
				uni.previewImage({
					current: 0,
					urls: arr
				});
			},
		},
		beforeDestroy() {}
	}
</script>

<style lang="scss">
	.orderlist-content {
		.order-item {
			display: flex;
			flex-direction: column;
			padding: 30rpx 26rpx 14rpx;
			border-bottom: 1rpx solid #D9D9D9;
			background-color: #fff;

			.type {
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				margin-bottom: 21rpx;
				flex-direction: row-reverse;

				.count-down {
					display: flex;
				}
			}

			.order-info {
				color: #333333;
				font-size: 21rpx;
				line-height: 1.5;
				margin-bottom: 33rpx;
				.copy{
					height: 21rpx;
					width: 21rpx;
					margin-left: 17rpx;
				}
			}

			.product-list {
				overflow: hidden;
				position: relative;

				.product-item {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0;

					.img {
						height: 84rpx;
						width: 84rpx;
						border-radius: 50%;
						margin-right: 49rpx;
						flex-shrink: 0;
					}

					.pro-info {
						flex-grow: 1;
						line-height: 1.5;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						.name {
							font-size: 31.5rpx;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.describe {
							font-size: 24.5rpx;
							color: #979797;
						}
					}

					.pro-num {
						line-height: 1.5;
						font-size: 28rpx;
						text-align: right;
						margin-right: 37rpx;
						flex-shrink: 0;
						margin-left: 20rpx;

						.price {
							font-weight: bold;
						}

						.count {}
					}
				}

				&.is-pick-up::after {
					content: '';
					width: 100%;
					height: 100rpx;
					background-color: #fff;
					position: absolute;
					bottom: 0;
					background: linear-gradient(to bottom, #ffffff00, white);
				}
			}

			.unfold {
				width: 60rpx;
				margin-left: auto;
				margin-right: 22rpx;
			}

			.total-amount {
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
				text-align: right;
				margin: 23rpx 0;
			}

			.btm-btns {
				display: flex;
				justify-content: flex-end;

				.btn {
					height: 60rpx;
					width: 135rpx;
					background: #333;
					color: #fff;
					border-radius: 17rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 24.5rpx;
					margin-left: 10rpx;
					margin-bottom: 23rpx;

					&.border {
						border: 2rpx solid #333;
						background: #fff;
						color: #333;
						box-sizing: border-box;
						line-height: 56rpx;
					}
				}
			}
		}
	}
</style>